﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>系统注册- 班级管理系统</title>
    <link rel="stylesheet" href="~/css/reset.css" />
    <link rel="stylesheet" href="~/css/login.css" />
</head>
<body>
    <div class="container">
        <div class="login-wrapper">
            <div class="header">班级管理系统</div>
            <div class="form-wrapper">
                <input id="user" type="text" name="username" placeholder="username" class="input-item">
                <input id="mima" type="password" name="password" placeholder="password" class="input-item">
                <input id="cmima" type="password" name="password" placeholder="confirmPassword" class="input-item">
                <div id="passwordMatch"></div>
                <div class="div1">
                    <input id="re" type="submit" value="注册" class="btn1" onclick="register()" />
                    <a href="/Home/Login">已有账号，去登陆</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    function register() {
        var name = $("#user").val();
        var psw = $("#mima").val();
        $.post("/Home/Signup", { username: name, password: psw }, function (data) {
            if (data == "OK") {
                window.location.href = "/Home/Index?username=" + name;
            }
            else {
                alert(data);
                $("#user").val('');
                $("#mima").val('');
                $("#cmima").val('');
            }
        }
        );
    }
    document.getElementById("cmima").addEventListener("input", validatePassword);
    function validatePassword() {
        var password = document.getElementById("mima").value;
        var confirmPassword = document.getElementById("cmima").value;
            if (password !== confirmPassword) {
                document.getElementById("passwordMatch").innerHTML = "Passwords do not match.";
            document.getElementById("passwordMatch").style.color="red"
            document.getElementById("re").disabled = true
            document.getElementById("re").style.background="black"
            document.getElementById("re").style.color = "white"
            } else {
                document.getElementById("passwordMatch").innerHTML = "Passwords match.";
            document.getElementById("passwordMatch").style.color="green"
            document.getElementById("re").disabled = false
            document.getElementById("re").style.background = "linear-gradient(to right,#a6c1ee, #fbc2eb)"
            document.getElementById("re").style.color = "black"
            }
        }
</script>